<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h4>访问对象的方式: obj.name 或者 obj['name']</h4>
    <hr>
    <p>遍历数组（标准的 for 循环）：</p>
    
    <p id="demo"></p>
    <p>array.forEach 遍历：</p>
    <p id="demo2"></p>

    <p>添加元素：</p>
    <p id="demo3"></p>
    <script>

        // 对象操作
        var person = {
            firstName: "德玛西亚之力",
            lastName: "盖伦",
            id: 678,
            fullName: function () {
                return this.firstName + " " + this.lastName;
            }
        };

        console.log(person.fullName())
        console.log(person.firstName)
        console.log(person['firstName'])


        // 数组操作

        // 1.标准遍历
        let fruits = ["盖伦", "诺手", "武器", "奥拉夫"];
        // let fLen = fruits.length;

        let text = "<ul>";
        for (let i = 0; i < fruits.length; i++) {
            text += "<li>" + fruits[i] + "</li>";
        }
        text += "</ul>";
        document.getElementById("demo").innerHTML = text;

        let text2 = "<ul>";

        // 2. Array.foreach() 函数
        fruits.forEach(function(value){
            text2 += "<li>" + value + "</li>";

        })
        text += "</ul>";
        document.getElementById("demo2").innerHTML = text;
        document.getElementById("demo2").style.color = 'green';

        // 添加元素
        fruits.push("潘森")
        fruits[fruits.length] = "塞拉斯";

        console.log("添加后的数组为：",fruits)

        fruits.pop()
        console.log("删除最后的数组：",fruits)


    </script>

</body>

</html>